<template name="appXmssIndexUpdate">

<div class="small ui modal" id="otsKeyReuseDetected">
  <div class="header">OTS Key Reuse</div>
  <div class="content">
    <div class="ui warning icon message">
      <i class="warning icon"></i>
      <div class="content">
        <div class="header">
          You have attempted to set your Ledger Device to an OTS XMSS Index that has already been utilised.
          <br /><br />
          Please set your OTS Index to something that has not been used.
        </div>
        <p></p>
      </div>
    </div>
  </div>
  <div class="actions">
    <div class="ui approve green button">Okay</div>
  </div>
</div>

<h2 class="ui header pageHeader">
  <i class="envelope icon"></i>
  <div class="content">
    Update Ledger XMSS Index
  </div>
</h2>

<div class="ui left aligned segment pageSegment" id="messageCreateForm">

  <form id="updateXmssIndexForm" class="ui form">

    <h4 class="ui dividing header">Ledger Device Details</h4>

    <h4 id="transferFormFromAddress" class="breakable"><a class="ui purple label">Ledger Address</a> {{transferFrom.address}}</h4>
    <h4 class="breakable"><a class="ui yellow label">Ledger Balance</a> {{transferFrom.balance}}</h4>
    <h4 class="breakable"><a class="ui red label">Ledger App Version</a> {{ledgerAppVersion}}</h4>

    <h4 class="ui horizontal divider header">
      <i class="sort numeric up icon"></i>
      Set new XMSS Index
    </h4>

    <div class="field">
      This functionality allows you to override the XMSS index on your Ledger Device. This is useful if you're restoring an existing mnemonic seed to a new Ledger Device. Take note to never reuse existing XMSS indexes.
    </div>

    <h4 class="breakable"><a class="ui red label">Ledger Device XMSS Index</a> {{currentLedgerXMSSIndex}}</h4>
    <h4 class="breakable"><a class="ui red label">Suggested XMSS Index</a> {{suggestedXMSSIndex}}</h4>

    <div class="field">
      <label>New OTS Key Index</label>
      <input type="text" id="otsKey" placeholder="0" value="{{suggestedXMSSIndex}}" autocomplete="off">
    </div>

    <div class="field">
      <div class="ui warning icon message" style="display: inline-flex;">
        <i class="warning icon"></i>
        <div class="content">
          <div class="header">
            OTS Key Index Warning
          </div>
          <p>The <strong>OTS (One Time Signature)</strong> Key Index in the field above is estimated based on data provided by the QRL node you're connected to. You should <b>never</b> re-use the same OTS Key for more than 1 transaction. If you are unsure, it is safest to write down all used OTS Key Indexes, and store them in a safe place.</p>
        </div>
      </div>
    </div>

    <div class="field">
      <button id="saveXmssIndex" class="ui huge primary button red" style="float: left;">Save New XMSS Index</button>
      <br />
    </div>

    <div class="field">
      <br />
      <div id="updatingLedger" style="display: none;" class="ui icon message">
        <i class="notched circle loading icon"></i>
        <div class="content">
          <div class="header">
            Ledger Confirmation
          </div>
          <p>Confirm the new XMSS index on your Ledger Device ...</p>
        </div>
      </div>
    </div>

  </form>
</div>

<div id="otsKeyUpdated" class="ui green segment pageSegment" style="display: none;">
  <h4>OTS Key Index Updated Successfully</h4>
  <p style="word-wrap: break-word; word-break: break-all;">Your Ledger OTS Key Index has been updated successfully.</p>
</div>

<div id="otsKeyUpdateFailed" class="ui red segment pageSegment" style="display: none;">
  <h4>OTS Key Index Update Failed</h4>
  <p style="word-wrap: break-word; word-break: break-all;">Update to your Ledger OTS Key Index Failed.</p>
</div>

</template>